Unify storyline header: all content next to Moleskine cover#817
Unify storyline header: all content next to Moleskine cover#817realproject7 merged 4 commits intomainfrom
Conversation
Merge Zone 1 and Zone 2 into one unified header. Cover + title + info + stats + CTA all in a single side-by-side flex layout. - Mobile: cover left (100px) + info/stats/CTA right (flex-row always) - Desktop: cover left (160px) + everything right - Removed border-b separation between hero and stats - Stats grid + AddPlotButton now inside the right column - Cover left-aligned on mobile (not centered) Fixes #816 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
project7-interns
left a comment
project7-interns
left a comment
There was a problem hiding this comment.
Verdict: REQUEST CHANGES
Summary
The unified header layout itself is aligned with issue #816, but one explicit acceptance criterion is still missed. The CTA was moved into the right column, yet it still renders as a full-width button because AddPlotButton remains hard-coded to w-full.
Findings
- [medium] The add-plot CTA is still full-width, which conflicts with issue #816's requirement that the desktop button fit naturally in the right column instead of spanning the whole width.
- File:
src/components/AddPlotButton.tsx:46 - Suggestion: Make the button width configurable or update this usage so the unified-header path can render an auto-width CTA instead of the current
block w-fullcontrol.
- File:
Decision
Requesting changes until the CTA width matches the redesigned unified-header requirement.
Remove w-full from both active and disabled states. Use inline-block with px-6 padding so the button fits naturally in the right column instead of spanning full width. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
project7-interns
left a comment
project7-interns
left a comment
There was a problem hiding this comment.
Verdict: REQUEST CHANGES
Summary
The CTA-width fix is good, but the mobile layout still misses one explicit acceptance criterion from issue #816. The stats grid remains inside the right column, so on mobile it renders beside the cover instead of below the cover+info row.
Findings
- [medium] The mobile stats grid is still nested inside the right column, which conflicts with issue #816's requirement that mobile use a side-by-side cover+info row first, then a 2-column stats grid below that row.
- File:
src/app/story/[storylineId]/page.tsx:334 - Suggestion: Keep the unified header concept, but split the mobile structure so the stats grid sits below the cover+info row while desktop can still keep it in the right column.
- File:
Decision
Requesting changes until the mobile stats placement matches the issue's stated layout.
Stats grid and AddPlotButton now render outside the cover+info flex-row. On desktop, sm:pl-[176px] (160px cover + 16px gap) aligns them with the right column. On mobile, they span full width below the cover+info row. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
project7-interns
left a comment
project7-interns
left a comment
There was a problem hiding this comment.
Verdict: REQUEST CHANGES
Summary
The mobile-placement direction is now correct, but the follow-up patch introduced a structural grid bug and still leaves the disabled CTA in a full-width layout. The header still does not fully meet issue #816 as implemented.
Findings
-
[high] The stats section now has a duplicated nested grid wrapper, so the actual 6-cell stats grid sits inside a single outer grid item instead of spanning the available width. That breaks the intended mobile and desktop placement.
- File:
src/app/story/[storylineId]/page.tsx:334 - Suggestion: Remove the extra wrapper so there is only one
grid grid-cols-2 sm:grid-cols-3container for the six stat cells.
- File:
-
[medium] The active CTA is now auto-width, but the disabled state still renders as a block-level element and therefore remains full-width in the unified header.
- File:
src/components/AddPlotButton.tsx:35 - Suggestion: Give the disabled state the same natural-width treatment as the active state so expired/sunset stories preserve the redesigned layout too.
- File:
Decision
Requesting changes until the duplicated grid wrapper is removed and the disabled CTA matches the intended auto-width layout.
Remove duplicated nested grid div in stats section. Fix disabled AddPlotButton state to use inline-block + px-6 matching active state. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
project7-interns
left a comment
project7-interns
left a comment
There was a problem hiding this comment.
Verdict: APPROVE
Summary
The follow-up changes resolve my remaining layout blockers. The stats grid now sits below the cover+info row on mobile and aligns to the right-column start on desktop, and the disabled CTA now uses the same natural-width treatment as the active state.
Findings
-
[resolved] The mobile stats placement now matches issue #816's required structure.
- File:
src/app/story/[storylineId]/page.tsx:331 - Suggestion: None.
- File:
-
[resolved] The disabled CTA no longer forces a full-width layout in the unified header.
- File:
src/components/AddPlotButton.tsx:35 - Suggestion: None.
- File:
Decision
Approving. My prior blockers on the unified-header layout are addressed.
2 participants
Summary
Merges the separate hero + stats zones into one unified side-by-side layout (Ridibooks-inspired).
Key Changes
flex-rowon all sizes, notflex-col→flex-row)text-xlon mobile,text-2xlon desktop (slightly smaller to fit)w-12instead ofw-14to save space on mobileTest Plan
Fixes #816
🤖 Generated with Claude Code